<template>
	<a-form class="notice_filter_form" :model="formData">
		<div class="notice_filter_top">
			<a-space :size="16">
				<a-input-search v-model="formData.name" placeholder="请输入关键词搜索" />
				<a-button @click="handleUnfoldFilter">
					{{ `${!isUnflod ? '收起' : '展开'}筛选` }}
					<icon-caret-up v-if="!isUnflod" />
					<icon-caret-down v-else />
				</a-button>
				<template v-if="queryType">
					<a-checkbox v-model="formData.isBatch">只显示批量审批流程</a-checkbox>
				</template>
			</a-space>
			<a-space>
				<slot name="button"></slot>
			</a-space>
		</div>
		<transition name="slide" mode="out-in">
			<div class="notice_filter_bot" v-if="!isUnflod">
				<slot name="form" v-bind:data="formData"></slot>
				<a-form-item label="紧急度" label-col-flex="60px">
					<a-radio-group v-model="formData.instancy">
						<a-radio value="1">
							<template #radio>不限</template>
						</a-radio>
						<a-radio value="2">
							<template #radio>一般</template>
						</a-radio>
						<a-radio value="3">
							<template #radio>急</template>
						</a-radio>
						<a-radio value="4">
							<template #radio>紧急</template>
						</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-space :size="32">
					<a-form-item label="发起人" label-col-flex="60px">
						<a-input v-model="formData.initiator" placeholder="请选择" />
					</a-form-item>
					<a-form-item label="接收时间" label-col-flex="60px">
						<a-range-picker v-model="formData.date" shortcuts-position="left" show-time format="YYYY-MM-DD HH:mm" :shortcuts="rangeShortcuts" />
					</a-form-item>
				</a-space>
			</div>
		</transition>
	</a-form>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
interface FormDataType {
	name: string;
	instancy: string;
	initiator: string;
	isBatch: boolean;
	date: any[];
}
const isUnflod = ref(false);
const props = defineProps({
	modelValue: { type: Object as PropType<FormDataType>, default: () => {} },
	queryType: { type: Boolean, default: false }
});
const rangeShortcuts = reactive([
	{ label: '近一周', value: () => [dayjs(), dayjs().subtract(1, 'week')] },
	{ label: '近一月', value: () => [dayjs(), dayjs().subtract(1, 'month')] },
	{ label: '近三月', value: () => [dayjs(), dayjs().subtract(3, 'month')] },
	{ label: '近半年', value: () => [dayjs(), dayjs().subtract(6, 'month')] },
	{ label: '近一年', value: () => [dayjs(), dayjs().subtract(1, 'year')] }
]);
const emit = defineEmits<{ (e: 'update:modelValue', value: FormDataType): void }>();
const formData = ref<FormDataType>({ ...props.modelValue, instancy: '1' });
const handleUnfoldFilter = () => {
	isUnflod.value = !isUnflod.value;
};
</script>

<style lang="scss" scoped>
.notice_filter_form {
	flex-shrink: 0;
}
.notice_filter_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.notice_filter_bot {
	margin-top: 16px;
	border-radius: 4px;
	padding: 16px 16px 10px;
	border: solid 1px var(--color-border);
	:deep(.arco-form-item) {
		margin-bottom: 10px;
	}
	:deep(.arco-radio) {
		padding: 0;
		&.arco-radio-checked {
			color: rgb(var(--primary-6));
		}
	}
}
</style>
